<script lang="ts">
import { isLoading$, loadingText$ } from "@store/global";
$: hidden = !$isLoading$;
</script>
<div class="w-screen h-screen flex justify-center items-center top-0 left-0 absolute bg-slate-500 opacity-30" class:hidden>
  <div class="flex-container flex-col w-full space-y-2">
    <div class="w-16 h-16 border-4 border-dashed rounded-full animate-spin border-green-400"></div>
    <div class="opacity-100" >{$loadingText$}</div>
  </div>
</div>